<template>
	<view>
		<view class="allSelect">
			<view class="back" @click="back">
				返回
			</view>
			<view class="remove" @click="del">
				删除
			</view>
		</view>
		<view class="contentBox">
			<view class="content" v-for="(item,index) in getStateObj" :key='item.id'>

				<view class="left">
					<checkbox-group @change='select(item.id,getCheck[item.id])'>
						<!-- <checkbox-group> -->
						<checkbox :checked="getCheck[item.id]" />

					</checkbox-group>
					<image :src='item.url'></image>
				</view>
				<view class="right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="num">
						<view class="money">
							￥{{item.price}}

						</view>
						<uni-number-box :value="getWebNums[item.id]" @change='changeNums($event,item.id)'></uni-number-box>
					</view>
				</view>
			</view>

		</view>



		<view class="footer">
			<view class="fg">

			</view>
			<view class="bottom">
				<view class="all">
					<checkbox-group @change='checkall'>
						<checkbox :checked="getStateFlag" /><text>全选</text>
					</checkbox-group>
				</view>
				<view class="zj">
					实际付款：
					<text>￥{{sum}}</text>
				</view>
				<view class="js">
					立即付款
				</view>
			</view>
		</view>





	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			uniNumberBox
		},

		onShow() {
			console.log(this.objArr)

		},
		onLoad() {

		},
		computed: {
			...mapGetters(['sum', 'getWebNums', 'getCheck', 'getStateObj','getStateFlag'])
		},
		data() {
			return {
				flag: true,
				objArr: [],

			}
		},

		methods: {
			checkall() {
				var flag = this.getStateFlag
				// console.log(flag)
				// this.$store.state.flag ? this.$store.state.flag = false : this.$store.state.flag= true
				this.$store.commit('allSelect', flag)
			},

			//点击改变数字框组件数字nums
			changeNums(val, id) {
				//e为0，即nums为0时删除
				// console.log(val)
				
				this.$store.commit('changeWebNums', {
					val,
					id
				})
				this.$store.commit('deleteItem', val)
				

			},
			// 点击正选反选
			select(id, flag) {
				// console.log(flag)

				this.$store.commit('changeCheck', {
					id,
					flag
				})
			},
			del() {
			this.$store.commit('deleteSelect')
			},
			back(){
				uni.navigateTo({
					url:'/pages/goods/goods'
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background: #EEEEEE;
	}




	.allSelect {
		padding: 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
		background: white;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.all {
			font-size: 30rpx;

			checkbox {
				border-radius: 50%;
			}
		}

		.remove {}
	}


	.content {

		background: white;
		padding: 20rpx;
		display: flex;
		height: 200rpx;

		.left {

			display: flex;
			align-items: center;

			image {
				margin: 0 20rpx;
				width: 150rpx;
				height: 200rpx;

			}
		}

		.right {
			width: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.num {
				display: flex;
				justify-content: space-between;

				.money {
					color: #b50e03;
				}
			}
		}

	}

	.fg {

		//#ifdef H5
		height: 200rpx;
		background: #EEEEEE;
		//#endif;
		//#ifdef MP-WEIXIN
		height: 100rpx;
		background: #EEEEEE;
		//#endif;
	}

	.bottom {
		z-index: 99999;
		width: 750rpx;
		height: 100rpx;
		background: white;
		display: flex;
		position: fixed;
		justify-content: space-between;
		align-items: center;
		//#ifdef MP-WEIXIN
		bottom: 0rpx;
		//#endif;
		//#ifdef H5 
		bottom: 100rpx;
		//#endif;
		border-top: 1px solid #CCCCCC;
		font-size: 30rpx;

		.zj {
			margin-left: 20rpx;

			text {
				color: #b50e03
			}
		}

		.js {
			width: 200rpx;
			background: #b50e03;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color: white;

		}
	}
</style>
